<template>
  <el-container>
    <ws-aside class="ws-container-aside" :active="activeMenu" @item-select="handleSelect"></ws-aside>
    <ws-video-upload v-if="activeMenu === '1-1'"></ws-video-upload>
    <ws-video-app v-if="activeMenu === '1-2'"></ws-video-app>
    <ws-image-upload v-if="activeMenu === '2-1'"></ws-image-upload>
    <ws-image-app v-if="activeMenu === '2-2'"></ws-image-app>
    <ws-catalog-app v-if="activeMenu === '3'"></ws-catalog-app>
  </el-container>
</template>

<script>
import WsAside from './Aside'
import WsVideoApp from '@/views/videos/VideoApp'
import WsVideoUpload from '@/views/videos/VideoUpload'
import WsImageApp from '@/views/images/ImageApp'
import WsImageUpload from '@/views/images/ImageUpload'
import WsCatalogApp from '@/views/catalogs/CatalogApp'

export default {
  name: 'WsMain',
  components: {
    WsAside,
    WsVideoApp,
    WsVideoUpload,
    WsImageApp,
    WsImageUpload,
    WsCatalogApp
  },
  data () {
    return {
      activeMenu: '3'
    }
  },
  methods: {
    handleSelect (index, indexPath) {
      console.log(index, indexPath)
      this.activeMenu = index
    }
  }
}
</script>

<style scoped>
.el-container {
  height: 100%;
}
.ws-container-aside {
  width: 250px;
}
</style>
